<template>
  <div
    class="CatalogCon"
    :style="{ backgroundImage: `url(${bgArr[currBg]})` }"
    ref="CatalogCon"
  >
    <h1
      class="title"
      :style="{ color: isNight ? '#b7b7b7' : 'black' }"
      v-if="content"
    >
      {{ content.title }}
    </h1>
    <div
      class="content"
      @click="showPopup"
      :style="{
        color: currBg == 5 ? '#b7b7b7' : 'black',
        fontSize: fontSize + 'px',
      }"
    >
      {{ content.cpContent }}
    </div>

    <!-- 上弹 -->
    <van-popup
      v-model="show"
      class="headTitle"
      position="top"
      :overlay="false"
      :style="{ height: '8%', background: isNight ? 'black' : '#ebe3e3' }"
    >
      <div @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <h1 v-if="item">{{ item.title }}</h1>
    </van-popup>
    <!-- 下弹 -->
    <van-popup
      v-model="show"
      class="bottomNav"
      position="bottom"
      :overlay="false"
      :style="{ height: '8%', background: isNight ? 'black' : '#ebe3e3' }"
    >
      <span
        class="iconfont icon-xuanxiang1"
        @click="chaptersShow = true"
      ></span>
      <span
        class="iconfont icon-gray-moon"
        :class="[isNight ? 'icon-yejianmoshi' : 'icon-gray-moon']"
        @click="changeNight"
      ></span>
      <span
        class="iconfont icon-shezhi1"
        @click="(fontShow = true), (show = false)"
      ></span>
      <span class="iconfont icon-xiazai3"></span>
    </van-popup>
    <!-- 左弹 -->
    <van-popup
      v-model="chaptersShow"
      class="Chapters"
      :overlay="false"
      position="left"
      :style="{
        height: '100%',
        width: '90%',
        color: isNight ? '#b7b7b7' : 'black',
        background: isNight ? 'black' : '#f1eded',
      }"
    >
      <h1 v-if="item">{{ item.title }}</h1>
      <h2>目录</h2>
      <hr />
      <ul
        :style="{
          color: isNight ? '#b7b7b7' : 'black',
          background: isNight ? 'black' : '#f1eded',
        }"
      >
        <li
          v-for="(item, index) in chapters"
          :key="index"
          @click="lookBook(item, index)"
          :style="{ color: index == CurrChapter ? '#da3d3f' : '' }"
        >
          {{ index + 1 }}.{{ item.title }}
        </li>
      </ul>
      <div
        class="shade"
        :style="{ background: isNight ? 'black' : '#f1eded' }"
      ></div>
    </van-popup>

    <!-- 字体大小 -->
    <van-popup
      v-model="fontShow"
      position="bottom"
      :overlay="false"
      :style="{ height: '25%', background: isNight ? 'black' : '#f1eded' }"
      @click="show = false"
      class="fontSize"
    >
      <div class="luminance">
        <img
          src="../assets/images/weave_reader_def_light_down_22_22.png"
          alt=""
        />
        <input
          type="range"
          name=""
          id=""
          value="1"
          max="1"
          min="0"
          step="0.05"
        />
        <img
          src="../assets/images/weave_reader_def_light_up_22_22.png"
          alt=""
        />
      </div>

      <div class="wordsize">
        <div class="subtract" @click="subtract">
          <img
            src="../assets/images/flax_reader_btu_aaminius_76_32_n.png"
            alt=""
          />
        </div>
        <div class="size">{{ fontSize }}px</div>
        <div class="add" @click="add">
          <img
            src="../assets/images/flax_reader_btu_aaplus_76_32_n.png"
            alt=""
          />
        </div>
      </div>
      <div class="wordBg">
        <img
          v-for="(item, index) in unSelectorBg"
          :key="index"
          :src="index == currBg ? SelectedBg[currBg] : unSelectorBg[index]"
          @click="changeBg(index)"
          alt=""
        />
      </div>
    </van-popup>

    <van-loading :vertical="true" v-if="loading">加载中...</van-loading>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  props: ["id", "link", "index", "book", "chapters"],
  data() {
    return {
      content: "",
      datalink: this.link,
      show: false,
      loading: true,
      item: this.book,
      chaptersShow: false,
      CurrChapter: 0,
      isNight: false,
      fontShow: false,
      fontSize: 16,
      bgArr: [
        require("../assets/images/reader_background_sm.png"),
        require("../assets/images/reader_background_ss.png"),
        require("../assets/images/reader_background_ypz.png"),
        require("../assets/images/reader_background_th.png"),
        require("../assets/images/reader_background_mw.png"),
        require("../assets/images/reader_background_hbb.png"),
      ],
      currBg: 0,
      SelectedBg: [
        require("../assets/images/reader_set_bg_btn_select_sm.png"),
        require("../assets/images/reader_set_bg_btn_select_ss.png"),
        require("../assets/images/reader_set_bg_btn_ypz_pre.png"),
        require("../assets/images/reader_set_bg_btn_select_th.png"),
        require("../assets/images/reader_set_bg_btn_select_mw.png"),
        require("../assets/images/reader_set_bg_btn_hbb_pre.png"),
      ],
      unSelectorBg: [
        require("../assets/images/reader_set_bg_btn_nor_sm.png"),
        require("../assets/images/reader_set_bg_btn_nor_ss.png"),
        require("../assets/images/reader_set_bg_btn_ypz_nor.png"),
        require("../assets/images/reader_set_bg_btn_nor_th.png"),
        require("../assets/images/reader_set_bg_btn_nor_mw.png"),
        require("../assets/images/reader_set_bg_btn_hbb_nor.png"),
      ],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  activated() {
    if (!this.item) {
      this.item = JSON.parse(localStorage.getItem("currBook"));
      this.load = false;
    } else {
      localStorage.setItem("currBook", JSON.stringify(this.book));
    }
    if (!this.link) {
      this.datalink = JSON.parse(localStorage.getItem("link"));
    } else {
      localStorage.setItem("link", JSON.stringify(this.link));
    }
    this.getContent(this.datalink);
    this.CurrChapter = this.getCurrChapters();
  },
  mounted() {
    this.toggleChapter();
  },
  methods: {
    ...mapMutations(["addUser"]),
    //获取章节内容
    getContent(linkk) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 1000,
      });
      let link = encodeURIComponent(linkk.link);
      window.axios("http://novel.kele8.cn/chapters/" + link).then((result) => {
        this.content = result.data.chapter;
        this.loading = false;
      });
      this.CurrChapter = this.getCurrChapters();
    },
    showPopup() {
      if (!this.chaptersShow && !this.fontShow) {
        this.show = !this.show;
      } else {
        this.chaptersShow = false;
        this.fontShow = false;
      }
    },
    lookBook(item, index) {
      this.addChapters(item, index);
      this.$router.push({
        name: "CatalogCon",
        params: {
          id: item._id,
          link: item,
          index: index,
          book: this.item,
          chapters: this.chapters,
        },
      });
      this.currChapter = this.getCurrChapters();
    },
    //获取看到第几章
    getCurrChapters() {
      // console.log(this.user);
      let hasLook = this.user.chapters.find((item) => item.id == this.item._id);
      if (!hasLook) return 0;
      return hasLook.currIndex;
    },
    addChapters(item, index) {
      let user = this.user;
      if (user.chapters.some((chapter) => item._id == chapter.currChapter.id))
        return;
      // 如果没有这本书的话push，否则修改
      let hasLook = user.chapters.findIndex((item) => item.id == this.item._id);
      if (hasLook >= 0) {
        user.chapters.splice(hasLook, 1);
        user.chapters.push({
          bookName: this.item.title,
          id: this.item._id,
          currChapter: item,
          currIndex: index,
        });
      } else {
        user.chapters.push({
          bookName: this.item.title,
          id: this.item._id,
          currChapter: item,
          currIndex: index,
        });
      }

      this.addUser(user);
      let users = JSON.parse(localStorage.getItem("user"));
      users = users.map((item) => {
        if (this.user.name == item.name) {
          return this.user;
        } else {
          return item;
        }
      });
      localStorage.setItem("user", JSON.stringify(users));
    },
    // 字号减
    subtract() {
      this.fontSize = this.fontSize > 16 ? this.fontSize - 2 : this.fontSize;
    },
    // 字号加
    add() {
      this.fontSize = this.fontSize < 24 ? this.fontSize + 2 : 24;
    },
    //改变背景
    changeBg(index) {
      // 关闭夜间模式
      this.isNight = false;
      //链接data的下标图片地址赋值给背景
      this.currBg = index;
    },
    //夜间模式
    changeNight() {
      this.isNight = !this.isNight;
      this.currBg = this.isNight ? 5 : 0;
    },
    //上一章下一章
    toggleChapter() {
      let box = this.$refs.CatalogCon;
      box.ontouchstart = (e) => {
        box.startx = e.targetTouches[0].clientX;
      };
      box.ontouchend = (e) => {
        box.endx = e.changedTouches[0].clientX;
        let x = box.endx - box.startx;
        if (x <= -100) {
          console.log("下一张");
          //获取下一章内容
          this.getContent(this.chapters[this.CurrChapter + 1]);
          //存入本地相应账号，
          this.addChapters(
            this.chapters[this.CurrChapter + 1],
            this.CurrChapter + 1
          );
          this.CurrChapter = this.CurrChapter + 1;
        } else if (x >= 100) {
          console.log("上一张");
          this.getContent(this.chapters[this.CurrChapter - 1]);
          this.addChapters(
            this.chapters[this.CurrChapter - 1],
            this.CurrChapter - 1
          );
          this.CurrChapter = this.CurrChapter - 1;
        }
      };
    },
  },
};
</script>

<style lang='less'>
.CatalogCon {
  padding: 16px;
  height: 100%;
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: center center;
  .title {
    font-size: 28px;
    font-weight: 500;
    line-height: 35px;
  }
  .content {
    margin-top: 15px;
    line-height: 25px;
    font-size: 16px;
    white-space: pre-wrap;
    letter-spacing: 3px;
    background: transparent;
  }
  .van-overlay {
    background: transparent;
  }
  .van-popup {
    background: #050505;
  }
  .headTitle {
    display: flex;
    align-items: center;
    color: #bfbfbf;
    font-size: 16px;
    h1 {
      margin-left: 7px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    > div {
      padding-left: 8px;
      height: 100%;
      width: 40px;
      display: flex;
      align-items: center;
    }
    .van-icon-arrow-left {
      color: #bfbfbf;
      font-size: 23px;
      font-weight: bold;
    }
  }
  .bottomNav {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .iconfont {
      font-size: 22px;
      color: #bfbfbf;
      flex: 1;
    }
  }
  .fontSize {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 12px 16px;
    box-sizing: border-box;
    .luminance {
      display: flex;
      justify-content: space-between;
      img {
        width: 20px;
        height: 20px;
      }
      input {
        flex: 1;
        margin: 0 7px;
      }
    }
    .wordsize {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin: 25px 0;
      color: #cccaca;
      .size {
        font-size: 20px;
      }
      img {
        width: 70px;
      }
    }
    .wordBg {
      display: flex;
      justify-content: space-between;
      img {
        width: 14%;
        height: 30px;
      }
    }
  }
  //章节目录
  .Chapters {
    background: white;
    .shade {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 35px;
      background: white;
    }
    h1 {
      font-size: 18px;
      padding: 16px 16px;
    }
    h2 {
      font-size: 16px;
      padding: 10px 16px;
    }
    ul {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      li {
        padding: 16px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  .van-loading {
    height: 100vh;
    display: grid;
    place-content: center;
  }
}
</style>